<template>
  <div class="">
    <!-- view-wrapper -->
    <div class="listBox">
      <div class="listBox_head">
        <el-button  @click="handleAdd" type="primary">新增短信通知</el-button>
        <div>剩余短信数量：{{num}}</div>
      </div>
      <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
        <template v-slot:operate="{ scope }">
          <el-button @click="handleEdit(scope.row.id)" size="small" v-if="scope.row.status == 1">编辑</el-button>
          <el-button @click="lookDetail(scope.row.id)" size="small" v-if="scope.row.status != 1">查看</el-button>
        </template>
      </ex-table>
    </div>
    <add-diglog
      v-if="detailDialog"
      :id="id"
      :pathType="pathType"
      :visible.sync="detailDialog"
      @success="_handleSuccess"
    />
    <look-diglog
      v-if="lookDialog"
      :id="id"
      :path="path"
      :visible.sync="lookDialog"
      @success="_handleSuccess"
    />
  </div>
</template>
<script>
  // components
  import {
    textmessagelist,
    getMessageUsableNum
  } from "@/api/smsConfiguration";
  import handlePageMixin from "@/mixins/handlePageMixin";
  import addDiglog from '@/views/incentiveManagement/smsList/components/addDiglog' 
  import lookDiglog from '@/views/incentiveManagement/smsList/components/lookDiglog'
  import {
    mapGetters
  } from "vuex";
  export default {
    name: "billList",
    components: {
      addDiglog,
      lookDiglog
    },
    mixins: [handlePageMixin],
    data() {
      return {
        loading: false,
        detailDialog: false,
        lookDialog: false,
        id: '',
        pathType: 'add',
        date: [],
        num: '',
        tableData: [],
      
        tableColumn: [{
            prop: "title",
            label: "标题"
          },
          {
            prop: "templateName",
            label: "短信模板",
            width: 100
          },
          {
            prop: "time",
            label: "执行时间"
          },
          {
            prop: "peoples",
            label: "通知人数"
          },
          {
            prop: "statusDict",
            label: "状态"
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            fixed: "right",
          },
        ],
      };
    },
    computed: {
      
    },
    created() {},
    mounted() {
      this.getList();
      this.getMessageUsableNum()
    },
    methods: {
      getMessageUsableNum(){
        getMessageUsableNum().then(res => {
          this.num = res.result
        })
      },
      search() {
        //搜索
 
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
      },
      reset() {

        this.date = [];
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
      },
      getList() {
        const params = {
          ...this.pageOptions,
        };
        this.loading = true;
        textmessagelist(params)
          .then((res) => {
            this.tableData = res.result.records;
            this.tableData.forEach((item) => {
              let ls = this.tableData;
              ls.forEach((item) => {
                Object.keys(item).forEach((key) => {
                  if (!item[key]) {
                    item[key] = "-";
                  }
                });
              });
              item.payMoney = '￥' + item.payMoney
              item.returnMoney = '￥' + item.returnMoney
            });
            this.$refs.table.pageOptions.total = res.result.total;
          })
          .finally(() => {
            this.loading = false;
          });
      },
     
      _handleSuccess() {
        this.getList();
      },
      handleAdd(){
        this.detailDialog = true
        this.pathType = 'add'
      },
      //编辑
      handleEdit(id){
        this.detailDialog = true
        this.pathType = 'edit'
        this.id = id
      },
      lookDetail(id) {
       this.detailDialog = true
        this.pathType = 'detail'
        this.id = id
      },
    },
  };

</script>
<style lang="scss" scoped>
  .el-card-title {
    font-size: 20px;
  }
  .el-form--inline .el-form-item {
    margin-right: 20px;
  }
  .listBox_head{
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .listBox {
    //   box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  

</style>
